<template>
	<view class="i-more">
		<!-- 加载中 -->
		<view v-if="status === 'loading'" class="loading-status">
			<view class="loading-icon">
				<view class="loading-circle"></view>
			</view>
			<text>加载中...</text>
		</view>
		
		<!-- 暂无更多 -->
		<view v-else-if="status === 'nomore'" class="nomore-status">
			<text>暂无更多</text>
		</view>
		
		<!-- 下拉加载 -->
		<view v-else class="nomore-status">
			<text>加载更多</text>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		defineProps,
		defineEmits
	} from 'vue'
	
	const props = defineProps({
		/**
		 * 加载状态
		 * loading - 加载中
		 * nomore - 没有更多了
		 * loadmore - 下拉加载更多
		 */
		status: {
			type: String,
			default: 'loadmore',
			validator: (value: string) => {
				return ['loading', 'nomore', 'loadmore'].includes(value)
			}
		},
		// 背景颜色
		background: {
			type: String,
			default: 'transparent'
		},
		// 文字颜色
		color: {
			type: String,
			default: '#999'
		},
		// 高度
		height: {
			type: String,
			default: '80rpx'
		}
	})
	
	const emit = defineEmits(['click'])
	
	// const handleClick = () => {
	// 	// 只有在loadmore状态下才能触发点击事件
	// 	if (props.status === 'loadmore') {
	// 		emit('click')
	// 	}
	// }
</script>

<style lang="scss" scoped>
	.i-more {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 30rpx 0;
		color: v-bind(color);
		background-color: v-bind(background);
		height: v-bind(height);
		box-sizing: border-box;
		
		text {
			font-size: 24rpx;
		}
		
		.loading-status {
			display: flex;
			align-items: center;
			
			.loading-icon {
				margin-right: 10rpx;
				width: 32rpx;
				height: 32rpx;
				position: relative;
				
				.loading-circle {
					width: 100%;
					height: 100%;
					border: 2rpx solid #e5e5e5;
					border-top-color: #666;
					border-radius: 50%;
					animation: rotate 0.8s linear infinite;
				}
			}
		}
		
		.nomore-status {
			position: relative;
			padding: 0 20rpx;
			
			&::before, &::after {
				content: '';
				position: absolute;
				top: 50%;
				width: 80rpx;
				height: 1rpx;
				background-color: #e0e0e0;
			}
			
			&::before {
				left: -80rpx;
			}
			
			&::after {
				right: -80rpx;
			}
		}
		
		.loadmore-status {
			position: relative;
			font-style: italic;
			
			&::after {
				content: '';
				position: absolute;
				bottom: -6rpx;
				left: 0;
				width: 100%;
				height: 1rpx;
				background-color: currentColor;
				transform: scaleX(0.8);
				opacity: 0.7;
			}
		}
	}
	
	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}
		to {
			transform: rotate(360deg);
		}
	}
</style>